import React from 'react';
import echarts from 'echarts';
import { pieColors } from '../config';
import {formatNumber} from '../utils/tools';

export default class PieChart extends React.Component
{
    componentDidMount()
    {
        let _chart = echarts.init(document.getElementById(this.props.id));
        this._chart = _chart;
        this.update();
    }
    update()
    {
        let index = 0;
        let total = 0;
        for(let i = 0;i < this.props.data.length;i++)
        {
            let color = pieColors[index];
            console.log(this.props.data[i].value);
            total += Number(this.props.data[i].value);
            this.props.data[i].itemStyle = {
                normal: {
                    color
                }
            };
            index++;
            index %= pieColors.length;
        }
        total = total.toFixed(2);
        const white = '#fff';
        let option = {
            title: {
                x: 'center',
                y: '40%',
                text: this.props.title,
                subtext: formatNumber(total),
                textStyle: {
                    color: '#000',
                    fontWeight: 'bold',
                    fontSize: 14
                },
                subtextStyle: {
                    color: '#000',
                    fontWeight: 'bold',
                    fontSize: 18
                }
            },
            tooltip: {
                trigger: 'item',
                textStyle: {
                    fontSize: 12
                },
                formatter: "{a} <br/>{b}: {c} ({d}%)"
            },
            series: [
                {
                    type: 'pie',
                    radius: ['45%','70%'],
                    label: {
                        normal: {
                            show: false,
                        }
                    },
                    data: [{
                        itemStyle: {
                            normal: {
                                color: white,
                                shadowBlur: 80,
                                shadowColor: 'rgba(65, 15, 1, 0.4)'
                            }
                        }
                    }],
                    silent:true
                },
                {
                    name: this.props.title,
                    type: 'pie',
                    selectedMode: 'single',
                    selectedOffset:5,
                    radius: ['55%','80%'],
                    labelLine: {
                        normal: {
                            show: false,
                            lineStyle: {
                                color: white
                            }
                        }
                    },
                    label: {
                        normal: {
                            show: false,
                            formatter: "{b}",
                            textStyle: {
                                color: white,
                                fontWeight: 'bold',
                                fontSize: 12
                            }
                        }
                    },
                    data: this.props.data,
                    itemStyle: {
                        normal: {
                            shadowBlur: 80,
                            shadowColor: 'rgba(65, 15, 1, 0.4)'
                        }
                    }
                }
            ]
        };
        this._chart.setOption(option);
    }
    componentDidUpdate()
    {
        this.update();
    }
    render()
    {
        let style = {
            width: '100%',
        };
        return (
            <div className="pie_chart" id={this.props.id} style={style}>
            </div>
        );
    }
}